<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>视频</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/jquery-2.1.4.min.js"></script>

    <style>
        .classify{
            background-color: white;
            padding: 10px;
        }
        .classify_item{
            padding: 0px 20px; font-size: 15px;
            margin: 10px 0px;
        }
        .classify_item.active, .classify_item:hover{
            cursor: pointer;
            color: #ff8000; font-weight: bold;
            border: 1px solid;
            border-radius: 5px;
        }

        .flow-default li{
            width:200px;
            height: 200px;
            border:1px solid;
        }
        .card-body:hover{
            cursor: pointer;
        }
        .card-center{
            display: flex;flex-direction: row; font-size: 14px;
        }
        .card-title{
            width: 65%; padding: 5px 30px 5px 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
        }
        .card-course{
            width: 35%;  padding: 5px 30px 5px 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; color:#ff8000;font-weight: bold
        }
        .card-footer{
            display: flex; flex-direction: row; padding: 3px 5px 3px 10px;
        }
        .card-footer img{
            width: 30px; height: 30px; border-radius: 50%
        }
        .card-footer span{
            font-size: 15px; line-height: 30px; margin-left: 10px;
        }
    </style>
</head>
<body class="lay-blog">
<div th:include="/teacher/templates::header"></div>
<div class="container-wrap">
    <div class="container" style="width:1100px;">
        <div class="" id="video_vue">
            <div class="classify">
                <div class="grade_classify" style="display: flex; flex-direction: row;margin: 20px;">
                    <div class="classify_item active" @click="selectGrade(0, $event)">
                        全部分类
                    </div>
                    <div class="classify_item" v-for="g in grades" @click="selectGrade(g.id, $event)">
                        {{g.name}}
                    </div>
                </div>
                <div class="course_classify" style="display: flex; flex-direction: row; margin: 20px;flex-wrap: wrap">
                    <div class="classify_item active" @click="selectCourse(0, $event)">
                        全部课程
                    </div>
                    <div class="classify_item" v-for="c in courses" @click="selectCourse(c.id, $event)">
                        {{c.name}}
                    </div>
                </div>
            </div>

            <div class="content">
                <div class="video" id="video">
                    <div v-for="v in videoes" class="layui-card" style="width: 32%; float: left;margin: 5px;">
                        <div class="layui-card-body card-body">
                            <a :href="'/teacher/video/detail.html?id='+v.id">
                                <img :src="v.coverImg" style="width:100%; height: 240px;" />
                            </a>
                        </div>
                        <div class="card-center">
                            <div class="card-title">{{v.title}}</div>
                            <div class="card-course">{{v.course.name}}</div>
                        </div>
                        <div class="card-footer">
                            <img src="/upload/user/images/me.jpg" />
                            <span>admin</span>
                        </div>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>

        </div>

    </div>
</div>

<div th:include="/teacher/templates::footer"></div>
<script src="/layui/layui.js"></script>
<script src="/vue/vue.js"></script>
<script>

    VideoVue = new Vue({
        el:'#video_vue  ',
        data:{
            grades:[],
            courses:[],
            gradeId:0,
            courseId:0,
            videoes:[
            ]
        },
        created:function(){
            this.init();
        },
        methods:{
            init:function () {
                $.get('/api/grade', res => {
                    this.grades = res.data;
                });
                $.get('/api/course/byGradeId', {gradeId:4}, res => {
                    this.courses = res.data;
                });
                loadVideo();
            },
            selectGrade:function (gradeId, event) {
                $(event.target).siblings().removeClass('active')
                $(event.target).addClass('active')
                this.gradeId = gradeId;
                $.get('/api/course/byGradeId', {gradeId:gradeId}, res => {
                    this.courses = res.data;
                });
                this.videoes = []
                layui.use('flow', function(){
                    var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
                    var flow = layui.flow;
                    loadVideo();
                });
            },
            selectCourse:function (courseId, ev) {
                $(ev.target).siblings().removeClass('active')
                $(ev.target).addClass('active')
                this.courseId = courseId;
                this.videoes = []
                layui.use('flow', function(){
                    var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
                    var flow = layui.flow;
                    loadVideo();
                });
            }
        },
        watch:{
        }
    })

    function loadVideo(){
        layui.use('flow', function(){
            var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
            var flow = layui.flow;
            flow.load({
                elem: '#video' //指定列表容器
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                    var lis = [];
                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    $.get('/api/video',{page:page,size:5, gradeId:VideoVue.gradeId,courseId:VideoVue.courseId}, function(res){
                        //假设你的列表返回在data集合中
                        $.each(res.data.content, function (index, item) {
                            VideoVue.videoes.push(item);
                        });
                        next('', page < res.data.totalPages);
                    });
                }
            });
        });
    }


</script>
</body>
</html>